<template>
	<div class="head">
		<div class="heads">
			<img :src="`${$ip}/api/public/showimg/${img}`" />
			<ul>
				<li>
					<router-link to="/mobile/moblielogin" v-show="!judge" style="color: white;">立即登录</router-link>
				</li>
				<li>
					<p v-show="judge">{{name}}</p>
				</li>

			</ul>

		</div>
		<div class="footers">
			<ul>
				<li>
					<router-link to="/mobile/moblieshop" style="color: white;"><i class="el-icon-goods"></i><br />购物车
					</router-link>
				</li>
				<li>
					<router-link to="/mobile/moblieupdatepwd" style="color: white;"></i><br />

						<i class="el-icon-s-ticket"></i><br />更新密码
					</router-link>
				</li>
				<li>
					<router-link to="/mobile/moblieupdateimg" style="color: white;">


						<i class="el-icon-s-custom"></i><br />更新头像</router-link>

				</li>
				<li>
					<router-link to="/mobile/moblieshop" style="color: white;">
						<i class="el-icon-loading"></i><br />浏览记</router-link>
				</li>
			</ul>
		</div>
		<div class="pic">
			<img src="../../assets/mobile/img/banner.png" />
		</div>
		<el-button @click="exit()">退出登录</el-button>
	</div>
</template>

<script>
	import MobileHome from './MobileHome.vue';

	export default {
		name: 'MobilemyHome',
		data() {
			return {
				name: '',
				img: '',
				judge: false
			}
		},
		computed: {


		},
		components: {
			MobileHome
		},
		methods: {

			exit() {
				window.localStorage.clear();
				this.judge = false;
				this.img=null;
			}
		},
		mounted() {
			this.name = window.localStorage.getItem("name");
			this.img = window.localStorage.getItem("img");
			this.judge = window.localStorage.getItem("judge");
		}
	}
</script>

<style>
	.heads {
		width: 100%;
		height: 10rem;
		background-color: #343434;
		color: white;
		display: flex;
		margin-top: -2rem;

	}

	.heads img {
		position: relative;
		top: 2rem;
		left: 1.5rem;
		width: 20vw;
		height: 20vw;
		border-radius: 50%;

	}

	.heads ul {
		position: relative;
		left: 3rem;
		top: 3.5rem;

	}

	.footers {
		width: 100%;
		height: 5rem;
		font-size: 0.9rem;
		line-height: 0.2rem;
		background-color: #3f3f3f;
		color: white;
	}

	.footers ul {
		display: flex;
		text-align: center;
	}

	.footers ul li {
		width: 30%;
	}

	.footers i.el-icon-goods {
		font-size: 1.5rem;
		color: #ffa0ac;
		line-height: 3rem;
	}

	.footers i.el-icon-s-ticket {
		font-size: 1.5rem;
		color: #fec388;
		line-height: 3rem;
	}

	.footers i.el-icon-s-custom {
		font-size: 1.5rem;
		color: #57adef;
		line-height: 3rem;
	}

	.footers i.el-icon-loading {
		font-size: 1.5rem;
		color: #c7aef8;
		line-height: 3rem;
	}

	.pic {
		width: 100%;
	}

	.pic img {
		width: 100%;
	}
</style>